<template>
	<view class="earlyWarning">
		<view class="" style="height: 160rpx;">
			<view class="mail_List fixed z_ninetynine">
				<view class="mail" style="font-weight: 700;">
					<view class="order">人脸录入</view>
				</view>
			</view>
			<view class="icon fixed z_ninetynine">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>

		</view>
		<view class="faceEntry">
			<view class="faceEntry_top">
				<view class="faceEntry_Photo">
					<view class="" style="width: 150rpx;height: 200rpx;margin: 50rpx auto 0;">
						<image src="../../../static/workOrder/woman.png" mode="" style="width: 150rpx;height: 200rpx;">
						</image>
					</view>
					<view class="" style="margin-top: 26rpx; font-size: 20rpx;text-align: center;">
						正确示例：五官清晰
					</view>
				</view>
				<view class="faceEntry_upload">
					<view class=""
						style="width: 150rpx;height: 200rpx;margin: 50rpx auto 0;background-color: #c4c4c4;border-radius: 9rpx;"
						@click="upload">
					</view>
					<!-- 					<view class="" style="width: 150rpx;margin: 50rpx auto 0;">
						<u-upload :action="action"  :custom-btn="true">
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							</view>
						</u-upload>
					</view> -->
					<view class="" style="margin-top: 26rpx; font-size: 20rpx;text-align: center;">
						点击上传图片
					</view>
				</view>
			</view>
			<view class="faceEntry_bottom">
				提示:请保持五官清晰以方便系统识别<br />不清晰的照片可能会影响您单元门的进入
			</view>
		</view>
		<u-modal v-model="show" :content="content"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [{
					// url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}],
				show: false,
				tempFilePaths: ''
			}
		},
		methods: {
			// 上传图片
			upload() {
				let that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths);
						// debugger
						console.log(JSON.stringify(res.tempFilePaths));
						// that.tempFilePaths=JSON.stringify(res.tempFilePaths)
						const tempFilePaths = JSON.stringify(res.tempFilePaths);
						uni.uploadFile({
							url: 'http://192.168.2.82:9100/apip/updateAvatar', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							formData: {
							    'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								console.log('1111111111')
							},
							error: (uploadFileRes)=> {
								console.log(uploadFileRes.data);
							}
						});
						// this.Portrait()
					},

				});


				// uni.chooseImage({
				// 	count: 1,
				// 	success: (res) => {
				// 		const tempFilePaths = res.tempFilePaths;
				// 		// uni.uploadFile({
				// 		// 	url: 'http://192.168.2.82:9100/apip/uploadAvatar', //post请求的地址
				// 		// 	// filePath: tempFilePaths[0],
				// 		// 	// name: 'avatar',
				// 		// 	// formData: {
				// 		// 	// 	'username': this.userInfo.username //formData是指除了图片以外，额外加的字段
				// 		// 	// },
				// 		// 	success: (uploadFileRes) => {
				// 		// 		//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
				// 		// 		// var obj = JSON.parse(uploadFileRes.data);
				// 		// 	}
				// 		// })
				// 		this.Portrait()
				// 	}
				// })
			},
			Portrait() {
				console.log(111)
				this.openUrl('/pagesB/my/faceEntry/portrait/portrait')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.earlyWarning {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				height: 160rpx;
				line-height: 230rpx;
				color: #fff;
				font-size: 40rpx;
				background-color: #2a4f65;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 96rpx;
			left: 20rpx;
		}

		.faceEntry {
			.faceEntry_top {
				display: flex;
				width: 80%;
				margin: 50rpx auto 0;
				justify-content: space-between;

				.faceEntry_Photo {
					width: 46%;
					height: 360rpx;
					box-shadow: 0rpx 5rpx 5rpx 3rpx #ccc;
				}

				.faceEntry_upload {
					width: 46%;
					height: 360rpx;
					box-shadow: 0rpx 6rpx 5rpx 3rpx #ccc;

					// .slot-btn {
					// 	width: 150rpx;
					// 	height: 200rpx;
					// 	background: #c4c4c4;
					// 	border-radius: 10rpx;
					// }

					// .slot-btn__hover {
					// 	background-color: rgb(235, 236, 238);
					// }

				}
			}

			.faceEntry_bottom {
				width: 392rpx;
				margin: 140rpx auto 0;
				font-size: 22rpx;
				color: #cccccc;
			}
		}

	}
</style>
